<template>
<div class="Announcements_detail">
  <div class="titleStyle" v-html=" getDetail (title)"></div>
  <div class="detailContentStyle" v-html=" getDetail (detailContent)"></div>
</div>
</template>

<script>
export default {
  name: 'AnnouncementDetail',
  data () {
    return {
      title: '',
      detailContent: '',
      tag: ''
    }
  },
  mounted () {
    this.tag = this.$route.query.tag
    this.init()
  },
  methods: {
    init () {
      let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('GET', 'http://127.0.0.1:3100/activity/show')
      xmlhttp.send(null)
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            that.dealRes(xmlhttp.response)
          }
        }
      }
      this.title = '网络编程课程作业'
      this.detailContent = '网络编程课程作业 \n' + '希望你们使用愉快！”\n'
    },
    dealRes (res) {
      let items = JSON.parse(res).activity
      console.log(items)
      for (var i = 0; i < items.length; i++) {
        if (items[i].tags === this.tag) {
          this.title = items[i].brief
          this.detailContent = items[i].details
        }
      }
    },
    getDetail (data) {
      return data.replace(/\n/g, '<br/>')
    }
  }
}
</script>

<style scoped>
  .Announcements_detail
  {
    position: relative;
    float: left;
    margin: 1% auto 0 auto;
    background: #f4f4f4;
    width: 80%;
    min-height: 375px;
    border-right: solid aliceblue 2px;
    border-radius: 5px;
  }
  .titleStyle{

    position: relative;
    font-size: 20px;
    display: inline-block;
    text-align: left;
  }
  .detailContentStyle
  {

    position: relative;
    font-size: 15px;
    margin: 2% auto 1% auto;
    text-align: left;
  }
</style>
